import React from "react";
import { useState } from "react";
import "./CommentItem.css";
import Commenting from "../assets/icons/Commenting.png";
import { ReactComponent as Comment } from "../assets/icons/Comment.svg";

const CommentItem = ({ avatar, nickname, time, text, repliedId, replyTo,  onReply,isCommented, setIsCommented}) => {

  const toggleComment = () => {
    setIsCommented(!isCommented);
    if (onReply) {
      onReply(nickname); // 通知父组件当前评论的回复状态
    }
  };

  return (
    <div className="comment-item">
      {/* 左侧头像 */}
      <div className="avatar-container">
        <img
          src={avatar}
          alt={nickname}
          className="comment-avatar"
          style={{ width: "40px", height: "40px", borderRadius: "50%", objectFit: "cover" }}
        />
      </div>

      {/* 中间内容: 昵称、评论、时间 */}
      <div className="comment-content">
        <div className="nickname-time">
          <span className="nickname">{nickname}</span>
          <span className="comment-time">{time}</span>
        </div>
        <div className="comment-text">
          {replyTo &&
          <span className="comment-text-content" style={{ color: "gray", marginRight: "10px" }}>回复 {replyTo}：</span>
          }
          <span>{text}</span>
        </div>
      </div>

      {/* 右侧回复按钮 */}
      <div className="reply-button" onClick={toggleComment}>
        {isCommented ? (
          <img src={Commenting} alt="Commenting" className="reply-button-icon-img" />
        ) : (
          <Comment className="reply-button-icon" />
        )}
      </div>

    </div>
  );
};


export default CommentItem;
